<template>
    <view class="main">
        <view class="tab">
            <view @tap="tabFun" data-index="1">
                <text :class="tabIndex == 1 ? 'active' : ''">待审核</text>
            </view>
            <view @tap="tabFun" data-index="2">
                <text :class="tabIndex == 2 ? 'active' : ''">未通过</text>
            </view>
            <view @tap="tabFun" data-index="3">
                <text :class="tabIndex == 3 ? 'active' : ''">已审核</text>
            </view>
        </view>
        <scroll-view scroll-y class="list">
            <view class="item" v-if="tabIndex == 2" v-for="(item, index) in list" :key="index">
                <navigator class="content" hover-class="none" :url="'/pages/goodsdetails/goodsdetails?id=' + item.product_id">
                    <image :src="'http://1.14.101.56:82/'+item.product_picture"></image>
                    <view class="text">
                        <view class="title">共{{ item.num }}件商品</view>
                        <view class="spec">{{ item.spec }}</view>
                        <view class="price">
                            <text>¥{{ item.price }}</text>
                        </view>
                    </view>
                </navigator>
            </view>

            <view class="item" v-if="tabIndex == 3" v-for="(item, index) in list" :key="index">
                <navigator class="content" hover-class="none" :url="'/pages/goodsdetails/goodsdetails?id=' + item.product_id">
                    <image :src="'http://1.14.101.56:82/'+item.product_picture"></image>
                    <view class="text">
                        <view class="title">{{ item.title }}</view>
                        <view class="orderNo">订单编号：{{ item.id }}</view>
                        <view class="price">
                            <text>共{{ item.num }}件商品</text>
                        </view>
                    </view>
                </navigator>

                <view style="width: 50px"><text style="color: red">待审核</text></view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            tabIndex: 1,
            list: [] // totalPrice:0,
        };
    },
    onLoad: function (options) {
        this.setData({
            tabIndex: options.type
        }); // this.getList()

        this.tabIndexFun();
    },
    methods: {
        // totalPrice:function(e){
        //   var that = this
        //   var price = 0
        //   for (var i = 0; i < that.data.list.length; i++) {
        //     if (that.data.list[i].select) {
        //       price = price + that.data.list[i].price * that.data.list[i].num
        //     }
        //   }
        //   that.setData({
        //     totalPrice: price.toFixed(2)
        //   })
        //   console.log(that.data.totalPrice)
        // },
        tabFun(e) {
		
            this.setData({
                tabIndex: e.currentTarget.dataset.index
            }); // console.log(this.data.tabIndex)

            this.tabIndexFun();
        },

        // getList() {
        // },

        /**
         * 生命周期函数--监听页面加载
         */
        tabIndexFun: function (e) {
			
			let userid=uni.getStorageSync("userid");
            if (this.tabIndex == 2) {
                // console.log(this);
                uni.request({
					url:"/api/user/order/getOrder",
					method:"POST",
					data:{user_id:userid},
                        success: (res) => {
                            // console.log("查询成功",res)
							if(res.data.code=="001"){
                            this.setData({
                                list: res.data.msg
                            });
							}
                        }
                    });
					}
            else if (this.tabIndex == 3) {
                 uni.request({
					url:"/api/user/order/getOrder",
					method:"POST",
					data:{user_id:userid},
                        success: (res) => {
                            console.log("查询成功",res.data.msg)
							if(res.data.code=="001"){ 
								this.setData({
                                list: res.data.msg
                            });
							}
                           
                        }
                    });
            } 
			else {
                this.setData({
                    list: []
                });
            }
        }
    }
};
</script>
<style>
.main {
    height: 100vh;
}

.tab {
    height: 7vh;
    display: flex;
    line-height: 7vh;
}

.tab view {
    flex: 1 0 auto;
    font-size: 14px;
    color: #333333;
    text-align: center;
}
.tab .active {
    color: #ef9b9b;
    border-bottom: 1px solid #ef9b9b;
    padding-bottom: 1.8vh;
}

.list {
    height: 93vh;
}

.list .item {
    display: flex;
    border-bottom: 1px solid #ededed;
    padding: 0 16px;
    height: 95px;
    align-items: center;
}

.list .label {
    flex: 0 0 auto;
    padding: 10px 0;
}

.list .content {
    flex-grow: 1;
    display: flex;
}

.list .content image {
    flex: 0 0 auto;
    height: 76px;
    width: 76px;
    padding-right: 10px;
}

.list .content .text {
    flex-grow: 1;
    font-size: 16px;
}

.list .content .title {
    overflow: hidden;
}
.list .content .orderNo {
    margin-top: 10px;
    font-size: 12px;
}

.list .content .spec {
    font-size: 12px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 24px;
    max-height: 24px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.list .content .price {
    margin-top: 10px;
    display: flex;
    font-size: 16px;
}

.list .content .price text:nth-child(1) {
    color: #ef9b9b;
    flex: 1 0 50%;
}

.list .content .price text:nth-child(2) {
    color: #999999;
    flex: 1 0 50%;
    text-align: right;
}
</style>
